<template>
    <body style="background-color: #f1f1f1">
      <div style="background-color: #f1f1f1; height: 100%">
        <!-- 演出预告标题 -->
        <div class="head">
          <div class="head-div" style="width: 56%">
            <div class="head-left">
              <img src="../assets//tpleft.svg" alt="" @click="back" />
              <div></div>
              <img src="../assets/tpright.svg" alt="" @click="homes" />
            </div>
            <div class="head-text">演出预告</div>
          </div>
        </div>
        <!-- 演出分类 -->
        <div class="live_tab">
          <van-tabs
            v-model:active="active"
            title-active-color="#2979FF"
            class="live_tabs"
            shrink
          >
            <van-tab :title="item.title" :name="item.id" v-for="item in tab"></van-tab>
          </van-tabs>
          <div class="time" :style="{ color: color }">
            <div class="times">
              <div>{{ list.title }}</div>
              <div>{{ list.start_time }}~{{ list.end_time }}</div>
            </div>
            <div class="content">
              {{ list.introduce }}
            </div>
          </div>
        </div>
      </div>
    </body>
  </template>
  
  <script setup>
  import { ref, watch, computed } from "vue";
  import { useRouter } from "vue-router";
  import { Perform } from "../api/perform";
  const router = useRouter();
  // 选项卡下标
  const active = ref(0);
  const tab = ref([]);
  const list = ref([]);
  watch(active, () => {
    Perform({
      scenic_id: 2,
    }).then((res) => {
      // 响应的返回
      console.log(res);
      console.log(active.value);
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].children) {
          list.value = res.data[i].children[0];
        } else {
          if (active.value == res.data[i].id) {
            list.value = res.data[i];
          }
        }
      }
      console.log(time, list.value);
    });
  });
  let date = new Date();
  let time =
    (date.getHours() > 9 ? date.getHours() : "0" + date.getHours()) +
    ":" +
    (date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes()) +
    ":" +
    (date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds());
  const color = computed(() => {
    if (time < list.value.start_time) {
      return "#0000ff";
    } else {
      if (time > list.value.end_time) {
        return "#777777";
      } else {
        return "#00ff00";
      }
    }
  });
  Perform({
    scenic_id: 2,
  }).then((res) => {
    // 响应的返回
    console.log(res);
    tab.value = res.data;
    active.value = res.data[0].id;
    for (let i = 0; i < res.data.length; i++) {
      if (res.data[i].children) {
        list.value = res.data[i].children[0];
      }
    }
    console.log(time, list.value);
  });
  const back = () => {
    history.back();
  };
  const homes = () => {
    router.push({
      path: "/home",
    });
  };
  </script>
  
  <style scoped>
  /* 头部 */
  .head {
    width: 100%;
    background-color: white;
    padding-bottom: 6.5px;
    padding-top: 6.5px;
    height: 50px;
    border-bottom: 1px solid #d4d4d4;
  }
  .head-div {
    padding-left: 16px;
    width: 51%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .head-text {
    font-size: 15px;
    color: rgba(80, 80, 80, 1);
  }
  
  .head-left {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 20px;
    height: 32px;
    width: 84px;
    border: 1px solid #e2e2e2;
  }
  .head-left div {
    background-color: rgba(153, 153, 153, 1);
    width: 1px;
    height: 24px;
  }
  
  .head-left img {
    width: 24px;
    height: 24px;
  }
  .live_title {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: #019de9;
    position: fixed;
    top: 0;
    z-index: 2;
  }
  
  .live_back {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
  }
  
  .live_text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
  }
  .time {
    width: 90%;
    margin: 5%;
    border-radius: 5px;
    background-color: #fff;
  }
  
  .times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-size: 20px;
  }
  
  .content {
    padding: 10px;
    font-size: 15px;
  }
  </style>
  